<template>
  <div class="login">
    <el-form ref="form" class="form" :model="form" :rules="rules">
      <div class="top">
        <div class="img">
          <img src="@/assets/img/login_logo.png" alt="">
        </div>
        <div class="title">
          <span class="left">黑马页面</span>
          <i />
          <span class="right">用户登录</span>
        </div>
      </div>
      <el-form-item class="input" prop="phone">
        <el-input
          v-model="form.phone"
          prefix-icon="el-icon-user"
          placeholder="请输入手机号"
        />
      </el-form-item>
      <el-form-item class="input" prop="password">
        <el-input
          v-model="form.password"
          prefix-icon="el-icon-lock"
          show-password
          placeholder="请输入密码"
        />
      </el-form-item>
      <el-form-item class="codeInput" prop="code">
        <el-input
          v-model="form.code"
          class="code"
          prefix-icon="el-icon-key"
          placeholder="请输入验证码"
        />
        <div class="codeImg" @click="imgClick">
          <img :src="codeUrl" alt="" class="img">
        </div>
      </el-form-item>
      <el-form-item prop="check" class="promise">
        <el-checkbox
          v-model="form.check"
          name="type"
        >我已阅读并同意<span class="name">用户协议</span>和<span
          class="name"
        >隐私条款</span></el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button
          class="btn1"
          type="primary"
          :loading="loading"
          @click="submit"
        >登录</el-button>
        <el-button
          class="btn2"
          type="primary"
          @click="registerEvent"
        >注册</el-button>
      </el-form-item>
    </el-form>
    <!-- 注册组件 -->
    <Reg ref="reg" />
  </div>
</template>

<script>
import Reg from './components/Register.vue'
import { validPhone } from '@/utils/validate.js'
// import { login } from '@/api/login.js'
export default {
  components: {
    Reg
  },
  data() {
    return {
      loading: false,
      codeUrl: process.env.VUE_APP_BASE_API + '/captcha?type=login',
      form: {
        phone: '18511111111', //	是	string	手机号
        password: '12345678', //	是	string	密码
        code: '',
        check: ''
      },
      rules: {
        phone: [
          { required: true, trigger: 'change', message: '请输入手机号' },
          {
            min: 11,
            max: 11,
            trigger: 'change',
            message: '请输入正确的手机号'
          },
          {
            validator: (rules, value, callback) => {
              validPhone(value)
                ? callback()
                : callback(new Error('请输入正确的手机号'))

              // const reg =
              //   /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
              // if (reg.test(value)) {
              //   callback()
              // } else {
              //   callback(new Error('请输入正确的手机号'))
              // }
            }
          }
        ],
        password: [
          { required: true, trigger: 'change', message: '请输入密码' },
          {
            min: 6,
            max: 12,
            trigger: 'change',
            message: '请输入6-12位密码'
          }
        ],
        code: [
          { required: true, trigger: 'change', message: '请输入验证码' },
          {
            min: 4,
            max: 4,
            trigger: 'change',
            message: '请输入验证码'
          }
        ],
        check: [
          {
            required: true,
            trigger: 'change',
            message: '请勾选协议'
          }
        ]
      }
    }
  },

  methods: {
    imgClick() {
      const src = this.codeUrl
      this.codeUrl = ''
      this.$nextTick(() => {
        this.codeUrl = src
      })
    },

    // 登录
    submit() {
      this.$refs.form.validate(async(result) => {
        this.loading = true
        if (result) {
          try {
            await this.$store.dispatch('user/toLogin', this.form)
            const redirect = this.$route.query.redirect || '/'
            this.$router.push(redirect)
            console.log('验证成功')
          } catch(error) {
           
          }finally{
             this.loading = false
          }
        } 
      })
    },

    // 注册
    registerEvent() {
      this.$refs.reg.isShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background: url('~@/assets/img/login_banner_ele.png') right no-repeat,
    linear-gradient(to right, #1493fa 28%, #01c6fa 96%);
  padding-top: 119px;

  .form {
    width: 478px;
    height: 550px;
    background: #f5f5f5;
    margin-left: 75px;
    padding-top: 47px;
    .top {
      display: flex;
      align-content: center;
      height: 27.72px;
      margin-left: 48px;
      line-height: 27.72px;
      text-align: center;
      margin-bottom: 27.53px;
      .title {
        display: flex;
        align-content: center;
        font-size: 22px;
        height: 27.72px;
        line-height: 27.72px;
        i {
          width: 1px;
          height: 27.72px;
          background: #c7c7c7;
        }
        .left {
          margin-left: 16px;
          margin-right: 14.44px;
        }
        .right {
          margin-left: 14px;
        }
      }
      .img {
        background-size: 100%;
        width: 22px;
        height: 17px;
        margin: 5px 0;

        img {
          width: 100%;
          height: 100%;
          line-height: 27.72px;
        }
      }
    }
    .input {
      width: 394px;
      height: 45px;
      margin-left: 43px;
    }
    .btn1,
    .btn2 {
      width: 394px;
      height: 45px;
      margin-left: 43px;
      margin-bottom: 26px;
      // margin-top: 20px;
    }

    .codeInput {
      margin-left: 43px;
      ::v-deep .el-form-item__content {
        display: flex;
      }

      .code {
        width: 284px;
        height: 43px;
      }
      .codeImg {
        width: 110px;
        height: 43px;
        .img {
          height: 100%;
          width: 100%;
        }
      }
    }

    .promise {
      margin-left: 43px;
      label.el-checkbox {
        .name {
          color: #3296fa;
        }
      }
    }
  }
}
</style>
